/*
 * @Date: 2022-03-29 12:59:07
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-04-12 09:34:51
 * @FilePath: /payment/pay/src/pages/PayGroundCard/PayGroundCardList.jsx
 */
import React, { useState, useEffect, useRef } from "react";
import zhCN from "antd/es/locale/zh_CN";
import {
  Row,
  Col,
  Button,
  Input,
  Table,
  Checkbox,
  ConfigProvider,
  Modal,
  Form,
  Select,
  Radio,
  Popover,
  notification,
} from "antd";
import "./Card.css";
import Tab from "../../components/Tabs";
import {
  SearchOutlined,
  PlusOutlined,
  CaretDownOutlined,
  EditTwoTone,
  DeleteTwoTone,
  SmileOutlined,
} from "@ant-design/icons";
import {
  getCardList,
  getCardListDetection,
  postCardListFsubmit,
  postCardListDelete,
  postCardListAamend,
  getCardListSelect,
  getCardListOperation,
} from "./../../API/PayCard";
import axios from "axios";
export default function PayGroundCardList() {
  //
  const [AmendId, setAmendId] = useState(null);
  //检测用户是否存在
  const Buname = useRef(null);
  //表单绑定
  const [form] = Form.useForm();
  const [reform] = Form.useForm();
  const [formAmend] = Form.useForm();
  //搜索框value值
  const Search = useRef(null);
  //总条数
  const [total, settotal] = useState(6);
  //每页条数
  const [pageSize, setpageSize] = useState(5);
  const [Index, setIndex] = useState(0);
  //气泡卡片
  const [card, setCard] = useState(false);
  //存储的id
  const [Cardid, setCardid] = useState(null);
  //控制开户modal
  const [visible, setVisible] = useState(false);
  //控制修改modal
  const [modal2Visible, setmodal2Visible] = useState(false);
  //控制资金操作modal
  const [modal3Visible, setmodal3Visible] = useState(false);
  //控制删除modal
  const [visibletwo, setvisibletwo] = useState(false);
  //表格数组
  const [data, setdata] = useState([]);
  useEffect(() => {
    CardPort(20, 1);
  }, []);
  //用户名接口函数
  const CardPort = (limit, page, uname) => {
    getCardList({ limit: limit, page: page, username: uname })
      /*  axios({
      url: "http://139.155.90.63:8080/adminhl/kslb/selectAllForPage",
      method: "get",
      params: { limit: limit, page: page, username: uname },
    }) */
      .then((res) => {
        console.log(res);
        let arr = [];
        res.data.map((item, index) => {
          let obj = {
            key: index,
            UserName: item.name,
            CardName: item.nickName,
            OverallBalance: item.zongYuE,
            AvailableBalance: item.keYongYuE,
            OrderAmount: item.dongJieJinE,
            RiskAmount: item.fengKongYuE,
            PaidToday: item.totalMoneyToday,
            TodayNumber: item.totalNumberToday,
            paidYesterday: item.totalMoneyYesterday,
            NumberYesterday: item.totalNumberYesterday,
            AccountStatus: item.accountState,
            LineState: item.onlineState,
            CardId: item.yongHuId,
            color: (
              <div className="color" style={{ background: item.color }}></div>
            ),
            AccountTime: item.createTime,
          };
          arr.push(obj);
        });
        settotal(res.count);
        //console.log(arr);
        setdata(arr);
      })
      .catch((err) => {
        console.log(err);
      });
  };
  //卡商id接口函数
  const CardPortuser = (limit, page, Cid) => {
    getCardList({ limit: limit, page: page, ksId: Cid })
      /* axios({
      url: "http://172.16.106.119:8081/adminhl/kslb/selectAllForPage",
      method: "get",
      params: { limit: limit, page: page, ksId: Cid },
    }) */
      .then((res) => {
        //console.log(res.data);
        let arr = [];
        res.data.map((item, index) => {
          let obj = {
            key: index,
            UserName: item.name,
            CardName: item.nickName,
            OverallBalance: item.zongYuE,
            AvailableBalance: item.keYongYuE,
            OrderAmount: item.dongJieJinE,
            RiskAmount: item.fengKongYuE,
            PaidToday: item.totalMoneyToday,
            TodayNumber: item.totalNumberToday,
            paidYesterday: item.totalMoneyYesterday,
            NumberYesterday: item.totalNumberYesterday,
            AccountStatus: item.accountState,
            LineState: item.onlineState,
            CardId: item.yongHuId,
            color: item.color,
            AccountTime: item.createTime,
          };
          arr.push(obj);
        });
        settotal(res.data.count);
        console.log(arr);
        setdata(arr);
      })
      .catch((err) => {
        console.log(err);
      });
  };
  //查询接口按钮
  const QueryCondition = () => {
    let cod = Search.current.input.value;
    CardPortuser(total, 1, cod);
    CardPort(total, 1, cod);
  };
  //检测用户名是否存在的接口
  const Detection = (id) => {
    getCardListDetection({ name: id })
      /*  axios({
      url: "http://172.16.106.119:8081/adminhl/kslb/selectKsName",
      method: "get",
      params: { name: id },
    }) */ .then((res) => {
        console.log(res);
        let message = null;
        if (res.msg === "用户名暂未使用") {
          message = "用户名" + id + "暂未使用";
        } else {
          message = "用户名" + id + "已存在";
        }
        notification.open({
          message: message,
          icon: <SmileOutlined style={{ color: "#009688" }} />,
          duration: 2,
          style: {
            top: 400,
            right: 500,
            zIndex: 50000,
            background: "#1F1F1F",
          },
        });
      });
  };
  //开户modal提交表单接口
  const Fsubmit = (a, b, c, d, e, f, g, h, i) => {
    postCardListFsubmit({
      accountState: a,
      color: b,
      name: c,
      nickName: d,
      password: e,
      tiXianFeiLv: f,
      tiXianMax: g,
      tiXianMin: h,
      tiXianShouXu: i,
    })
      /*  axios({
      url: "http://172.16.106.119:8081/adminhl/kslb/insertKs",
      method: "post",
      data: {
        accountState: a,
        color: b,
        name: c,
        nickName: d,
        password: e,
        tiXianFeiLv: f,
        tiXianMax: g,
        tiXianMin: h,
        tiXianShouXu: i,
      },
      headers: {
        "Content-Type": "application/json",
      },
    }) */ .then((res) => {
        console.log(res);
        CardPort(total + 1, 1);
      });
  };
  //修改接口
  const Aamend = (a, b, c, d, e, f, g, h, i, name) => {
    postCardListAamend({
      accountState: a,
      color: b,
      dongJieJinE: c,
      fengKongYuE: d,
      name: name,
      nickName: e,
      tiXianFeiLv: f,
      tiXianMax: g,
      tiXianMin: h,
      tiXianShouXu: i,
    }).then((res) => {
      console.log(res);
      CardPort(total, 1);
    });
  };
  //删除接口
  const ListDelete = (id) => {
    console.log(typeof id);
    postCardListDelete({ yongHuId: id }).then((res) => {
      console.log(res);
      CardPort(total - 1, 1);
    });
  };
  //点击卡商下的资金操作时调用显示下拉菜单接口
  const Selectct = () => {
    getCardListSelect({}).then((res) => {
      //console.log(res.data);
      settypea(res.data.SZ);
      settypeb(res.data.MY);
      console.log(typea);
    });
  };
  //资金操作接口
  const Operation = (name, money, caoZuoRen, leiXing, fangShi, beiZhu) => {
    getCardListOperation({
      ksName: name,
      money: money,
      caoZuoRen: caoZuoRen,
      leiXing: leiXing,
      fangShi: fangShi,
      beiZhu: beiZhu,
    }).then((res) => {
      console.log(res);
    });
  };
  //卡商列表的表格分页函数
  const CardPagechange = (pagination) => {
    setpageSize(pagination.pageSize);
    CardPort(pageSize, pagination.current);
  };
  //清空输入框内容时
  const CardEmpty = () => {
    if (Search.current.input.value.length == 0) {
      CardPort(pageSize, 1);
    }
  };

  //开户按钮
  const Bring = () => {
    console.log(total);
    setVisible(true);
  };
  //开户modal下检测用户名是否占用的按钮
  const openNotification = () => {
    Detection(Buname.current.input.value);
  };
  const onCard = () => {
    setCard(false);
  };
  //开户modal下的提交按钮
  const BSubmit = () => {
    form.validateFields().then((values) => {
      form.resetFields();
      console.log(values);
      Fsubmit(
        values.AccountStatus,
        values.MarkerColor,
        values.Busername,
        values.BmerchantName,
        values.Bpassword,
        values.Brate,
        values.BmaximumAmount,
        values.BminimumAmount,
        values.BfixedAmount
      );
    });
    setVisible(false);
  };

  const hide = (e, index) => {
    e.stopPropagation();
    setCard(true);
    setIndex(index);
  };
  const onCncel = () => {
    setVisible(false);
  };
  const onCncels = () => {
    setmodal2Visible(false);
  };
  //修改按钮
  const amend = (record) => {
    setmodal2Visible(true);
    setCard(false);
    console.log(record);
    setAmendId(record.CardId);
    formAmend.validateFields().then((values) => {
      formAmend.resetFields();
      //表单赋值
      formRef.current.setFieldsValue({
        AccountStatus: record.AccountStatus,
        Ausername: record.UserName,
        AnameCard: record.CardName,
        //AminimumAmount:record.
      });
    });
  };
  //修改modal内的提交按钮
  const onAmend = () => {
    formAmend.validateFields().then((values) => {
      console.log(values);
      Aamend(
        values.AccountStatus,
        values.MarkerColor,
        values.AccountFrozen,
        values.AmountRisk,
        values.AnameCard,
        values.Arate,
        values.AmaximumAmount,
        values.AminimumAmount,
        values.AfixedAmount,
        values.Ausername
      );
    });
    setmodal2Visible(false);
  };
  //资金操作按钮
  const Capitaloperation = (record) => {
    setmodal3Visible(true);
    Selectct({});
    console.log(record);
    setformsy(record);
  };
  //资金操作modal下提交按钮
  const onssub = () => {
    reform.validateFields().then((values) => {
      reform.resetFields();
      console.log(values);
      console.log(formsy);
      Operation(
        formsy.CardName,
        values.money,
        formsy.UserName,
        values.MerchantsAgentnder,
        values.GeMerchantsAgentnder,
        values.remark
      );
    });
    setmodal2Visible(false);
  };
  //删除modal下的确认按钮
  const DelConfirm = () => {
    ListDelete(Cardid);
    setvisibletwo(false);
  };
  //密码重置按钮
  const Reset = () => {};
  //表单绑定ref
  const formRef = useRef();
  //操作储存当前对象
  const [formsy, setformsy] = useState({});
  //删除按钮
  const Delete = (record) => {
    setvisibletwo(true);
    console.log(record);
    setCardid(record.CardId);
  };
  const { Option } = Select;
  //账变数组1
  const [typea, settypea] = useState([]);
  //账变数组2
  const [typeb, settypeb] = useState([]);
  const columns = [
    {
      title: "用户名",
      width: 100,
      dataIndex: "UserName",
      key: "UserName",
      fixed: "left",
    },
    {
      title: "卡商名称",
      dataIndex: "CardName",
      key: "CardName",
      width: 150,
    },
    {
      title: "总余额",
      dataIndex: "OverallBalance",
      key: "OverallBalance",
      width: 150,
    },
    {
      title: "可用余额",
      dataIndex: "AvailableBalance",
      key: "AvailableBalance",
      width: 150,
    },
    {
      title: "订单冻结金额",
      dataIndex: "OrderAmount",
      key: "OrderAmount",
      width: 150,
    },
    {
      title: "风控金额",
      dataIndex: "RiskAmount",
      key: "RiskAmount",
      width: 150,
    },
    {
      title: "今天代付",
      dataIndex: "PaidToday",
      key: "PaidToday",
      width: 150,
    },
    {
      title: "今天笔数",
      dataIndex: "TodayNumber",
      key: "TodayNumber",
      width: 150,
    },
    {
      title: "昨天代付",
      dataIndex: "paidYesterday",
      key: "paidYesterday",
      width: 150,
    },
    {
      title: "昨天笔数",
      dataIndex: "NumberYesterday",
      key: "NumberYesterday",
      width: 150,
    },
    {
      title: "账号状态",
      dataIndex: "AccountStatus",
      key: "AccountStatus",
      width: 150,
    },
    {
      title: "在线状态",
      dataIndex: "LineState",
      key: "LineState",
      defaultSortOrder: "descend",
      width: 150,
    },
    {
      title: "卡商id",
      dataIndex: "CardId",
      key: "CardId",
      width: 200,
    },
    {
      title: "颜色",
      dataIndex: "color",
      key: "color",
      width: 100,
    },
    {
      title: "开户时间",
      dataIndex: "AccountTime",
      key: "AccountTime",
      width: 200,
    },
    {
      title: "操作",
      key: "operation",
      fixed: "right",
      width: 100,
      render: (record, index) => (
        <Popover
          placement="bottomRight"
          visible={Index === index ? card : false}
          content={
            <div>
              <Row className="List-mdl" onClick={() => amend(record)}>
                <Col span={2}></Col>
                <Col span={20}>
                  <EditTwoTone /> 修改
                </Col>
              </Row>
              <Row
                className="List-mdl"
                onClick={() => Capitaloperation(record)}
              >
                <Col span={2}></Col>
                <Col span={20}>
                  <EditTwoTone /> 资金操作
                </Col>
              </Row>
              <Row className="List-mdl" onClick={() => Delete(record)}>
                <Col span={2}></Col>
                <Col span={20}>
                  <DeleteTwoTone /> 删除
                </Col>
              </Row>
              <Row className="List-mdl" onClick={() => Reset(record)}>
                <Col span={2}></Col>
                <Col span={20}>
                  <DeleteTwoTone /> 重置登录密码
                </Col>
              </Row>
            </div>
          }
          trigger="click"
        >
          <Button
            type="primary"
            className="green"
            onClick={(e) => hide(e, index)}
            size="small"
          >
            操作
            <CaretDownOutlined />
          </Button>
        </Popover>
      ),
    },
  ];

  return (
    <div onClick={onCard}>
      {/*  开户modal */}
      <Modal
        title="添加卡商"
        centered
        visible={visible}
        onOk={() => setVisible(false)}
        onCancel={() => setVisible(false)}
        width={1400}
        footer={[
          <Row key="Bring">
            <Col span={10}></Col>
            <Col span={2} className="F-btn">
              <Button
                key="confim"
                type="primary"
                size="large"
                onClick={BSubmit}
              >
                提交
              </Button>
            </Col>
            <Col span={2} className="F-btn">
              <Button key="cncel" type="primary" size="large" onClick={onCncel}>
                返回
              </Button>
            </Col>
          </Row>,
        ]}
      >
        {/* 标题:基本信息 */}
        <Row>
          <Col span={1}></Col>
          <Col span={22} className="Modal-title">
            基本信息
          </Col>
          <Col span={1}></Col>
        </Row>
        <Form
          className="Fome-item"
          form={form}
          initialValues={{ AccountStatus: 1 }}
        >
          {/* 用户名 */}
          <Row>
            <Col span={20}>
              <Form.Item
                label="用户名"
                name="Busername"
                rules={[{ required: true, message: "请输入用户名" }]}
              >
                <Input size="large" ref={Buname} placeholder="请输入用户名" />
              </Form.Item>
            </Col>
            <Col span={4}>
              <Button
                type="primary"
                className="Form-bt"
                size="large"
                onClick={openNotification}
              >
                检测是否占用
              </Button>
            </Col>
          </Row>
          {/* 商户名称 */}
          <Row>
            <Col span={24}>
              <Form.Item
                label="商户名称"
                name="BmerchantName"
                rules={[{ required: true, message: "请输入商户名称" }]}
              >
                <Input size="large" placeholder="请输入商户名称" />
              </Form.Item>
            </Col>
          </Row>
          {/* 密码 */}
          <Row>
            <Col span={11}>
              <Form.Item
                label="登录密码"
                name="Bpassword"
                rules={[{ required: true, message: "请输入密码" }]}
              >
                <Input size="large" placeholder="请输入登录密码" />
              </Form.Item>
            </Col>
            <Col span={2}></Col>
            <Col span={11}>
              <Form.Item
                label="重复登陆密码"
                name="Brepetitionpwd"
                //rules={[{ required: true, message: "重复输入的密码格式错误" }]}
              >
                <Input size="large" placeholder="请输入重复登录密码" />
              </Form.Item>
            </Col>
          </Row>
          {/* 最小金额,最大金额 */}
          <Row>
            <Col span={11}>
              <Form.Item
                label="最小金额"
                name="BminimumAmount"
                //rules={[{ required: true, message: "输入的最小金额格式错误" }]}
              >
                <Input size="large" placeholder="请输入最小金额" />
              </Form.Item>
            </Col>
            <Col span={2}></Col>
            <Col span={11}>
              <Form.Item
                label="最大金额"
                name="BmaximumAmount"
                //rules={[{ required: true, message: "输入的最小金额格式错误" }]}
              >
                <Input size="large" placeholder="请输入最小金额" />
              </Form.Item>
            </Col>
          </Row>
          {/* 费率、单笔固定金额*/}
          <Row>
            <Col span={11}>
              <Form.Item
                label="费率(%)"
                name="Brate"
                // rules={[{ required: true, message: "输入的费率格式错误" }]}
              >
                <Input size="large" placeholder="请输入费率" />
              </Form.Item>
            </Col>
            <Col span={2}></Col>
            <Col span={11}>
              <Form.Item
                label="单笔固定金额(元)"
                name="BfixedAmount"
                rules={
                  [
                    // { required: true, message: "输入的单笔固定金额格式错误" },
                  ]
                }
              >
                <Input size="large" placeholder="请输入单笔固定金额" />
              </Form.Item>
            </Col>
          </Row>
          {/*  账号状态、标记颜色 */}
          <Row>
            <Col span={11}>
              <Form.Item
                label="账号状态"
                name="AccountStatus"
                //rules={[{ required: true, message: "输入的费率格式错误" }]}
              >
                <Radio.Group name="AccountStatus">
                  <Radio value={1}>正常</Radio>
                  <Radio value={0}>冻结</Radio>
                </Radio.Group>
              </Form.Item>
            </Col>
            <Col span={2}></Col>
            <Col span={11}>
              <Form.Item
                label="标记颜色"
                name="MarkerColor"
                rules={
                  [
                    //{ required: true, message: "输入的单笔固定金额格式错误" },
                  ]
                }
              >
                <Input type="color" style={{ width: 50 }} />
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </Modal>
      {/* 修改modal */}
      <Modal
        title="修改卡商"
        centered
        visible={modal2Visible}
        onOk={() => setmodal2Visible(false)}
        onCancel={() => setmodal2Visible(false)}
        width={1200}
        footer={[
          <Row key="amend">
            <Col span={10}></Col>
            <Col span={2} className="F-btn">
              <Button
                key="amend1"
                type="primary"
                size="large"
                onClick={onAmend}
              >
                提交
              </Button>
            </Col>
            <Col span={2} className="F-btn">
              <Button
                key="amend2"
                type="primary"
                size="large"
                onClick={onCncels}
              >
                返回
              </Button>
            </Col>
          </Row>,
        ]}
      >
        <Row>
          <Col span={1}></Col>
          <Col span={22} className="Modal-title">
            基本信息
          </Col>
          <Col span={1}></Col>
        </Row>
        <Form
          className="Fome-item"
          initialValues={{ AccountStatus: 1 }}
          form={formAmend}
          ref={formRef}
        >
          {/* 用户名 */}
          <Row>
            <Col span={11}>
              <Form.Item
                label="用户名"
                name="Ausername"
                //rules={[{ required: true, message: "输入的密码格式错误" }]}
              >
                <Input size="large" disabled />
              </Form.Item>
            </Col>
            <Col span={2}></Col>
            <Col span={11}>
              <Form.Item
                label="卡商名称"
                name="AnameCard"
                rules={[{ required: true, message: "重复输入的密码格式错误" }]}
              >
                <Input size="large" />
              </Form.Item>
            </Col>
          </Row>
          {/* 金额 */}
          <Row>
            <Col span={11}>
              <Form.Item
                label="最小金额"
                name="AminimumAmount"
                //rules={[{ required: true, message: "输入的密码格式错误" }]}
              >
                <Input size="large" />
              </Form.Item>
            </Col>
            <Col span={2}></Col>
            <Col span={11}>
              <Form.Item
                label="最大金额"
                name="AmaximumAmount"
                rules={[{ required: true, message: "重复输入的密码格式错误" }]}
              >
                <Input size="large" />
              </Form.Item>
            </Col>
          </Row>
          {/* 费率、单笔固定金额 */}
          <Row>
            <Col span={11}>
              <Form.Item
                label="费率"
                name="Arate"
                //rules={[{ required: true, message: "输入的密码格式错误" }]}
              >
                <Input size="large" />
              </Form.Item>
            </Col>
            <Col span={2}></Col>
            <Col span={11}>
              <Form.Item
                label="单笔固定金额(元)"
                name="AfixedAmount"
                rules={[{ required: true, message: "重复输入的密码格式错误" }]}
              >
                <Input size="large" />
              </Form.Item>
            </Col>
          </Row>
          {/*  冻结金额、风控金额 */}
          <Row>
            <Col span={11}>
              <Form.Item
                label="冻结金额"
                name="AccountFrozen"
                //rules={[{ required: true, message: "输入的密码格式错误" }]}
              >
                <Input size="large" />
              </Form.Item>
            </Col>
            <Col span={2}></Col>
            <Col span={11}>
              <Form.Item
                label="风控金额"
                name="AmountRisk"
                rules={[{ required: true, message: "重复输入的密码格式错误" }]}
              >
                <Input size="large" />
              </Form.Item>
            </Col>
          </Row>
          {/* 账户状态、颜色 */}
          <Row>
            <Col span={11}>
              <Form.Item
                label="账号状态"
                name="AccountStatus"
                //rules={[{ required: true, message: "输入的费率格式错误" }]}
              >
                <Radio.Group name="AccountStatus">
                  <Radio value={1}>正常</Radio>
                  <Radio value={0}>冻结</Radio>
                </Radio.Group>
              </Form.Item>
            </Col>
            <Col span={2}></Col>
            <Col span={11}>
              <Form.Item
                label="标记颜色"
                name="MarkerColor"
                rules={
                  [
                    //{ required: true, message: "输入的单笔固定金额格式错误" },
                  ]
                }
              >
                <Input type="color" style={{ width: 50 }} />
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </Modal>
      {/* 资金操作modal */}
      <Modal
        title="资金操作"
        centered
        visible={modal3Visible}
        onOk={() => setmodal3Visible(false)}
        onCancel={() => setmodal3Visible(false)}
        width={1600}
        footer={[
          <Row key="jsha">
            <Col span={10}></Col>
            <Col span={2} className="F-btn">
              <Button key="confim" type="primary" size="large" onClick={onssub}>
                提交
              </Button>
            </Col>
            <Col span={2} className="F-btn">
              <Button key="cncel" type="primary" size="large">
                返回
              </Button>
            </Col>
          </Row>,
        ]}
      >
        <Form form={reform} className="Fome-item" style={{ marginTop: "50px" }}>
          {/* 用户名 */}
          <Row>
            <Col span={24}>
              <Form.Item
                label="金额"
                name="money"
                //rules={[{ required: true, message: "输入的密码格式错误" }]}
              >
                <Input size="large" placeholder="请输入充值金额" />
              </Form.Item>
            </Col>
          </Row>
          {/*  账变类型 */}
          <Row>
            <Col span={24}>
              <Form.Item
                name="GeMerchantsAgentnder"
                label="账变类型"
                rules={[{ required: true, message: "请选择你的商户代理" }]}
              >
                <Select
                  name="GeMerchantsAgentnder"
                  allowClear
                  size="large"
                  placeholder="收入"
                >
                  {typea.map((item, index) => {
                    return (
                      <Option key={index} value={item.state}>
                        {item.state}
                      </Option>
                    );
                  })}
                </Select>
              </Form.Item>
            </Col>
          </Row>
          {/*  账变类型 */}
          <Row>
            <Col span={24}>
              <Form.Item
                name="MerchantsAgentnder"
                label="账变类型"
                rules={[{ required: true, message: "请选择你的商户代理" }]}
              >
                <Select
                  name="MerchantsAgentnder"
                  allowClear
                  size="large"
                  placeholder="入金账变"
                >
                  {typeb.map((item, index) => {
                    return (
                      <Option key={index} value={item.state}>
                        {item.state}
                      </Option>
                    );
                  })}
                </Select>
              </Form.Item>
            </Col>
          </Row>
          {/* 备注 */}
          <Row>
            <Col span={24}>
              <Form.Item
                label="备注"
                name="remark"
                rules={[{ required: true, message: "输入的密码格式错误" }]}
              >
                <Input size="large" placeholder="请输入备注" />
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </Modal>
      {/* 删除modal */}
      <Modal
        title="信息"
        centered
        className="Modaltwo"
        visible={visibletwo}
        onCancel={() => setvisibletwo(false)}
        width={600}
        footer={[
          <Row key="Delse">
            <Col span={6}></Col>
            <Col span={6} className="F-btn">
              <Button
                key="Delsure"
                onClick={DelConfirm}
                type="primary"
                size="large"
              >
                确定
              </Button>
            </Col>
            <Col span={6} className="F-btn">
              <Button
                onClick={() => setvisibletwo(false)}
                type="primary"
                size="large"
                key="Delrtn"
              >
                返回
              </Button>
            </Col>
          </Row>,
        ]}
      >
        <Row>
          <Col
            span={24}
            style={{
              height: "80px",
              lineHeight: "80px",
              textAlign: "center",
            }}
          >
            是否删除代付配置
          </Col>
        </Row>
      </Modal>

      <Tab title={"卡商列表"}></Tab>
      <Row className="Input-one">
        <Col span={4}>
          <Input
            size="large"
            type="text"
            placeholder="用户名/手机/卡商户"
            ref={Search}
            onChange={CardEmpty}
          />
        </Col>
        <Col span={2} className="Button-icon">
          <Button
            className="green"
            size="large"
            type="primary"
            icon={<SearchOutlined />}
            onClick={QueryCondition}
          >
            搜索
          </Button>
        </Col>
        <Col span={2} className="Button-icon">
          <Button
            className="green"
            size="large"
            type="primary"
            onClick={Bring}
            icon={<PlusOutlined />}
          >
            开户
          </Button>
        </Col>
      </Row>
      <ConfigProvider locale={zhCN}>
        <Table
          bordered="true"
          rowSelection={{ type: Checkbox }}
          columns={columns}
          dataSource={data}
          scroll={{ x: 3000, y: 450 }}
          sticky="true"
          onChange={CardPagechange}
          pagination={{
            total: total,
            pageSize: pageSize,
            pageSizeOptions: [5, 10, 30, 100],
            showQuickJumper: true,
          }}
        />
      </ConfigProvider>
    </div>
  );
}
